<template>
  <div class="granary-list-item-type-two">
    <div class="img">
      <div class="background1">
        <img :src="coverUrl" />
      </div>
      <div class="background2">
        <img :src="coverUrl" />
      </div>
      <van-image width="100%" height="100%" radius="15" :src="coverUrl" />
      <i class="type"></i>
      <span class="post-count">{{postCount}}</span>
      <div class="hot">
        <i></i>
        <span class="view-count">{{viewCount}}</span>
      </div>
    </div>

    <div class="foot">
      <h2>{{name}}</h2>
      <div class="tag">
        <span>#{{tag}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GranaryListItemTypeTwo", //粮仓列表item
  props: ["coverUrl", "name", "postCount", "viewCount", "tag"],
  mounted() {
    // console.log(this.moduleName);
  }
};
</script>

<style lang="scss" scoped>
.granary-list-item-type-two {
  width: 30vw;
  margin: 10px auto;
  display: flex;
  flex-flow: column;

  .img {
    width: 30vw;
    color: rgb(255, 255, 255);
    position: relative;

    .background1,
    .background2 {
      width: 95%;
      opacity: 0.3;
      position: absolute;
      top: 5px;
      left: 2.5px;
      border-radius: 15px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .background2 {
      width: 90%;
      opacity: 0.1;
      top: 0px;
      left: 5px;
    }
    ::v-deep .van-image {
      margin-top: 10px;
    }

    .type {
      position: absolute;
      top: 15px;
      left: 5px;
      width: 12px;
      height: 12px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 999px;
      display: block;
      background-image: url("~@/assets/images/home/BIK.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    .post-count {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 999px;
      font-size: 12px;
      padding: 2px;
      top: 15px;
      right: 5px;
    }

    .hot {
      border-radius: 999px;
      position: absolute;
      bottom: 2px;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      padding: 2px 3px;

      i {
        width: 12px;
        height: 12px;
        display: block;
        background-image: url("~@/assets/images/home/fCa.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .view-count {
        font-size: 12px;
        padding: 2px;
      }
    }
  }

  .foot {
    h2 {
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      margin: 5px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag {
      font-size: 12px;
      span {
        color: #c1c1c1;
        background-color: rgba(245, 245, 245, 1);
        border-radius: 999px;
        padding: 2px 3px;
      }
    }
  }
}
</style>